<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="./utils/myRequest.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				//获取用户对象
				var user = store.getItem();
				
				if(user.maxHeand != null){
					document.getElementById("maxImg").src = user.maxHeand;
				}
				
			    //打开本地相册
				document.getElementById("btnUpload").addEventListener("tap",function(){
					plus.gallery.pick( function(path){
					    	console.log(path);
							var task = plus.uploader.createUpload(url.base_url + "/websocket/user/updateUserPic" , 
									{},
									function ( t, status ) {
										// console.log(JSON.stringify(t));
										var resp = t.responseText;
										// console.log(resp);
										// console.log(typeof resp.code);
										resp = JSON.parse(resp)
										// console.log(typeof resp);
										// 上传完成
										if(resp.code == 20000){
											//获取大图
											var maxHead = resp.data.maxHeader;
											//获取小图
											var minHead = resp.data.minHeader;
											//给大图赋值
											document.getElementById("maxImg").src = maxHead;
											//更新本地存储
											user.maxHeand = maxHead;
											user.minHeand = minHead;
											store.setItem(user);
											
											console.log(user.maxHeand + " : " + user.minHeand);
											
											plus.nativeUI.toast(resp.message);
											
											mui.back();
											
											//更新用户的头像
											plus.webview.getWebviewById("my.html").evalJS("updateUserMinHeader");
											
										}else{
											plus.nativeUI.toast(resp.message)
										}
									}
								);
								task.addFile( path, {key:"file"} );
								task.addData( "userId", user.id + "" );
								task.start();
							
					    }, function ( e ) {
					    	console.log( "取消选择图片" );
					    }, {filter:"image"});
				});
				
				//取消打开相册
				document.getElementById("reloadBtn").addEventListener("tap",function(){
					mui.back();
				});
			})
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的头像</h1>
		</header>
		<!-- 大图头像 -->
		<div style="text-align: center;margin-top: 100px;">
			<img src="./img/tou.jpg" id="maxImg" style="height: 220px;width: 220px;border-radius: 50%;margin-bottom: 50px;"/>
			
			<!-- <ul class="mui-table-view" style="margin-top: 50px;text-align: center;color: white;background-color: #007AFF;">
				<li class="mui-table-view-cell mui-media" id="choiseBtn">
					<a href="javascript:;">
						选择头像
					</a>
				</li>
			</ul> -->
			
			<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action">
				<!-- 可选择菜单 -->
				<ul class="mui-table-view">
				  <li class="mui-table-view-cell" id="btnUpload">
					<a href="#">从相册选择</a>
				  </li>
				  <li class="mui-table-view-cell">
					<a href="#">照相机</a>
				  </li>
				</ul>
				<!-- 取消菜单 -->
				<ul class="mui-table-view">
				  <li class="mui-table-view-cell" id="reloadBtn">
					<a href="#sheet1"><b>取消</b></a>
				  </li>
				</ul>
			</div>
			<a href="#sheet" id="openSheet" class="mui-btn mui-btn-primary mui-btn-block">选择头像</a>
			
		</div>
	</body>

</html>
